<template>
  <div p-5>
    <div class="title">账单统计</div>
    <div class="echarts">
      <VChart :option="spaceChartOption" autoresize />
    </div>
    <div class="title">账单列表</div>

    <DynamicTable
      bordered
      :data-request="loadData"
      :columns="columns"
      row-key="id"
      @resize-column="handleResizeColumn"
      :scroll="{
        y: 'calc(100vh - 750px)',
      }"
      show-index
    >
    </DynamicTable>
  </div>
</template>
<script setup lang="ts">
  import VChart from 'vue-echarts';

  import { baseColumns, type TableListItem } from './columns';
  import { ref, reactive } from 'vue';
  import {
    useTable,
    type OnChangeCallbackParams,
    type TableColumn,
  } from '@/components/core/dynamic-table';
  import type { TableRowSelection } from 'ant-design-vue/es/table/interface';

  import { use } from 'echarts/core';
  import { TooltipComponent, GridComponent, LegendComponent } from 'echarts/components';
  import { LineChart, PieChart } from 'echarts/charts';
  import { CanvasRenderer } from 'echarts/renderers';

  use([CanvasRenderer, TooltipComponent, GridComponent, LineChart, PieChart, LegendComponent]);
  const [DynamicTable] = useTable();
  const selectedFileList = ref<API.File[]>([]);
  const columns: TableColumn[] = [
    ...baseColumns,
    {
      title: '操作',
      align: 'left',
      width: 200,
      dataIndex: 'ACTION',
      actions: ({ record }) => [
        {
          label: '详情',
          onClick: () => console.log('111'),
        },
        {
          label: '编辑',
          onClick: () => console.log('111'),
        },
        {
          label: '收回',
          onClick: () => console.log('111'),
        },
        {
          label: '删除',
          onClick: () => console.log('111'),
        },
      ],
    },
  ];
  const loadData = async (
    params,
    onChangeParams: OnChangeCallbackParams,
  ): Promise<API.TableListResult> => {
    const data = {
      current: 1,
      orders: [],
      pages: 1,
      records: [
        {
          id: '1',
          userNum: 'HBD51313132131',
          userLogin: '实验室技术服务合作协议HT51313132131',
          userName: '长沙豆子信息技术有限公司',
          action: '91430100743176293C',
          operationTime: '1234.15',
          operationName: '1234.15',
          operationName2: '张三',
          operationName3: '2024-01-01 11:11',
        },
        {
          id: '2',
          userNum: 'HBD51313132131',
          userLogin: '实验室技术服务合作协议HT51313132131',
          userName: '长沙豆子信息技术有限公司',
          action: '91430100743176293C',
          operationTime: '1234.15',
          operationName: '1234.15',
          operationName2: '张三',
          operationName3: '2024-01-01 11:11',
        },
        {
          id: '3',
          userNum: 'HBD51313132131',
          userLogin: '实验室技术服务合作协议HT51313132131',
          userName: '长沙豆子信息技术有限公司',
          action: '91430100743176293C',
          operationTime: '1234.15',
          operationName: '1234.15',
          operationName2: '张三',
          operationName3: '2024-01-01 11:11',
        },
      ],
      searchCount: true,
      size: 10,
      total: 3,
    };

    return new Promise((resolve) => {
      setTimeout(() => {
        resolve({
          list: data,
          ...params,
        });
      }, 500);
    });
  };
  /**
   * @description 打开用户弹窗
   */
  const openUserModal = async (record: Partial<TableListItem> = {}) => {};
  const handleResizeColumn = (w, col) => {
    col.width = w;
  };
  const rowSelection = reactive<TableRowSelection<API.NetdiskManageListItem>>({
    selectedRowKeys: [],
    onChange: (selectedRowKeys: Key[], selectedRows) => {
      console.log('selectedRowKeys changed: ', selectedRowKeys);
      rowSelection.selectedRowKeys = selectedRowKeys;
      selectedFileList.value = selectedRows.map((n) => ({ type: n.type, name: n.name }));
    },
  });
  const newHeight = () => {
    return `height: calc(100vh - 494px);min-height: 250px;width: 100%`;
  };
  // line
  const spaceChartOption = ref({
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12'],
    },
    yAxis: {
      type: 'value',
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true,
    },
    legend: {
      orient: 'vertical',
      top: 'top',
      left: 'right',
      icon: 'circle',
      align: 'left',
    },
    series: [
      {
        name: '收入总金额',
        data: [400, 360, 215, 102, 331, 520, 340, 210, 105, 278, 410, 490],
        type: 'line',
        smooth: true,
      },
      {
        name: '成交单数',
        data: [100, 260, 415, 502, 431, 320, 240, 110, 205, 378, 410, 590],
        type: 'line',
        smooth: true,
      },
      {
        name: '退款单数',
        data: [210, 286, 325, 405, 366, 122, 312, 501, 402, 367, 291, 191],
        type: 'line',
        smooth: true,
      },
      {
        name: '退款金额',
        data: [79, 156, 223, 381, 516, 421, 377, 265, 221, 345, 432, 236],
        type: 'line',
        smooth: true,
      },
    ],
  });
</script>
<style scoped lang="less">
  .title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
  }
  .echarts {
    height: 340px;
  }
</style>
